<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="index.css">
</head>

<body class="theme-mode-dark">
	<div class="theme-container sidebar-open no-sidebar">
		<header class="navbar blur">
			<!-- logo -->
			<a class="home-link">
				<img src="./logo.svg" class="logo">
			</a>
			<!-- 导航头部右侧内容 -->
			<div class="links" style="max-width: 863px;">
				<!-- 导航文字 -->
				<nav class="nav-links can-hide">
					<div class="nav-item">
						<a class="nav-link">首页</a>
					</div>

					<div class="nav-item">
						<a class="nav-link">关于</a>
					</div>
					<div class="nav-item">
						<a class="nav-link">收藏</a>
					</div>
					<!-- github图标 -->
					<a class="repo-link">
						GitHub
						<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px"
								y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
								<path fill="currentColor"
									d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
								</path>
								<polygon fill="currentColor"
									points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
								</polygon>
							</svg>
						</span>
					</a>
				</nav>
			</div>
		</header>
		<!-- banner 部分 -->
		<div class="home-wrapper">
			<div class="banner">
				<div class="banner-conent" style="padding-top: 7rem;">
					<header class="hero">
						<!---->
						<h1 id="main-title">
							蓝桥云课的博客
						</h1>
						<p class="description">
							做受人尊敬的公司
						</p>
						<!---->
					</header>
					<!---->
				</div>
				<!---->
			</div>
			<!-- 内容部分 -->
			<div class="main-wrapper">
				<div class="main-left">
					<div class="card-box article-list">
						<div class="article-title">
							<a class="iconfont icon-bi">最近更新</a>
						</div>
						<div class="article-wrapper">
							<dl>
								<dd>01</dd>
								<dt>
									<a>
										<div>
											33个非常实用的JavaScript一行代码
											<!---->
										</div>
									</a>
									<span class="date">11-02</span>
								</dt>
							</dl>
							<dl>
								<dd>02</dd>
								<dt>
									<a>
										<div>
											Hook规则
											<!---->
										</div>
									</a> <span class="date">04-06</span>
								</dt>
							</dl>
							<dl>
								<dd>03</dd>
								<dt>
									<a>
										<div>
											使用State Hook
											<!---->
										</div>
									</a>
									<span class="date">04-06</span>
								</dt>
							</dl>
							<dl>
								<dd>04</dd>
								<dt>
									<a>
										<div>
											自定义 Hook
											<!---->
										</div>
									</a>
									<span class="date">04-06</span>
								</dt>
							</dl>
							<dl>
								<dd>05</dd>
								<dt>
									<a>
										<div>
											使用Effect Hook
											<!---->
										</div>
									</a>
									<span class="date">04-06</span>
								</dt>
							</dl>
							<dl>
								<dd>06</dd>
								<dt>
									<a>
										<div>
											Hook概述
											<!---->
										</div>
									</a>
									<span class="date">03-31</span>
								</dt>
							</dl>
							<dl>
								<dd>07</dd>
								<dt><a href="/pages/87146f/" class="">
										<div>
											案例演示
											<!---->
										</div>
									</a> <span class="date">03-27</span></dt>
							</dl>
							<dl>
								<dd>08</dd>
								<dt>
									<a class="">
										<div>
											React哲学
											<!---->
										</div>
									</a>
									<span class="date">03-26</span>
								</dt>
							</dl>
							<dl>
								<dd></dd>
								<dt>
									<a>更多文章&gt;</a>
								</dt>
							</dl>
						</div>
					</div>

				</div>

				<div class="main-right">
					<!-- 右侧头像和简介 -->
					<aside class="blogger-wrapper card-box">

						<!---->
						<div class="blogger"><span class="name">蓝桥</span> <span class="slogan">前端博客</span></div>
					</aside>
					<!-- 右侧文章分类 -->
					<div class="categories-wrapper card-box">
						<a class="title iconfont icon-wenjianjia" title="全部分类">文章分类</a>
						<div class="categories">
							<a class="">
								更多
								<span>12</span>
							</a>
							<a class="">
								实用技巧
								<span>2</span>
							</a>
							<a class="">
								jsx教程
								<span>1</span></a>
							<a class="">
								前端
								<span>15</span>
							</a>
							<a class="">
								JavaScript文章
								<span>12</span>
							</a>
							<a class="">
								《React》笔记
								<span>18</span>
							</a>
							<a class="">
								Hook
								<span>5</span>
							</a>
							<a class="">
								案例演示
								<span>1</span>
							</a>
							<a class="">
								核心概念
								<span>11</span>
							</a>
							<a class="">
								高级指引
								<span>1</span>
							</a>
							<a class="more">更多 ...</a>

						</div>
					</div>
				</div>
			</div>

		</div>
</body>

</html>